<template>
    <div class="regester-box">
        <div class="content-box">
            <div class="form-box">
                <div class="title-text">智能XX综合管理系统登录</div>
                <el-input
                    v-model="form.userName"
                    class="responsive-input"
                    placeholder="请输入用户名"
                    :prefix-icon="Avatar"
                />
                <el-input
                    v-model="form.password"
                    type="password"
                    class="responsive-input"
                    placeholder="请输入密码"
                    :prefix-icon="Lock"
                    @keyup.enter="submite"
                />
                <el-button type="primary" class="btn" @click="submite">登录</el-button>
            </div>
        </div>
        <img class="bg" :src="`/img/login.png`" alt="">
    </div>
</template>

<script lang="ts">
import { Avatar, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import 'element-plus/theme-chalk/el-notification.css'
import axios from 'axios'; // /users/register
import { login } from '@/api/users'
// import { useRouter } from 'vue-router'
// const router = useRouter();
export default {
    data() {
        return {
            Avatar,
            Lock,
            imgsrc: '/api-server/users/captcha',
            codeKey: 0,
            form: {
                userName: '',
                password: ''
                // code: ''
            }
        }
    },
    methods: {
        submite() {
            const res = Object.values(this.form);
            let status = true;
            res.map(val => status = !!val)
            if (!status) {
                ElNotification({
                    title: '错误',
                    message: '注册信息不得为空',
                    type: 'error',
                })
                return;
            }
            const { password, userName } = this.form
            login({
                username: userName,
                password: password
            }).then((data: { token: string}) => {
                localStorage.setItem('token', data.token)
                setTimeout(() => {
                    this.$router.push({ path: '/' })
                }, 500)
            }).finally(() => {})
            // axios({
            //     url: '/api-server/users/login',
            //     method: 'post',
            //     data: {
            //         username: userName,
            //         password: password
            //     }
            // }).then(res => {
            //     const { code } = res.data
            //     if (code !== 200) {
                    // ElNotification({
                    //     title: '错误',
                    //     message: res.data.message,
                    //     type: 'error',
                    // })
            //         this.codeKey ++
            //         return;
            //     }
            //     ElNotification({
            //         title: '成功！',
            //         message: res.data.message,
            //         type: 'success'
            //     })
            //     localStorage.setItem('token', res.data.data.token)
            //     setTimeout(() => {
            //         this.$router.push({ path: '/' })
            //     }, 500)
            // })
        }
    }
}
// DELETE FROM users WHERE user_index = 2;
// TRUNCATE TABLE users;
</script>

<style lang="scss" scoped>
.regester-box{
    height: 100vh;
    width: 100%;
    background-color: red;
    display: flex;
    justify-content: flex-end;
    position: relative;
    .content-box{
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        width: 735px;
        height: 100%;
        background-color: #f5f6f8;
        border: solid 1px #faffff;
        display: flex;
        justify-content: center;
        align-items: center;
        .form-box{
            width: 400px;
            height: 470px;
            .title-text{
                text-align: center;
                font-family: SourceHanSansSC-Bold;
                font-size: 40px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #090909;
                margin-bottom: 70px;
            }
            .responsive-input{
                margin-bottom: 40px;
                height: 40px;
            }
            .code-input{
                :deep(.el-input-group__append) {
                    padding: 0;
                }
                .code-img{
                    width: 100%;
                    height: 100%;
                }
            }
            .btn{
                width: 100%;
            }
        }
    }
    .bg{
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
    }
}
</style>